import React,{Component} from 'react';
import {connect} from 'react-redux';
import { Form, FormGroup, Label, Input } from 'reactstrap';
import { Button } from 'reactstrap';
import { delToCart ,delAllToCart,cartStatus,cartAllStatus} from '../actions'

import { Checkbox } from 'antd';
/* const CheckboxGroup = Checkbox.Group;
const plainOptions = [];
const defaultCheckedList = []; */

const mapStateToProps = (state)=>{
  console.log(state);
  return {
      carts: state.carts,
  }
}


class Carts extends Component{
  totalNum(){
    var num=0;
    this.props.carts.map((item,index)=>{
      if(item.checked==true){
        num+=item.quantity;
      }
    })
    return num;
  }
  totalPrice(){
    var price=0;
    this.props.carts.map((item,index)=>{
      if(item.checked==true){
        price+=item.quantity*item.price;
      }
    })
    return price;
  }
  checkAllOrNot(){
    var checkflag=0;
    var length=this.props.carts.length;
    var arr=this.props.carts;
    console.log(length,'3');
    for(var i=0;i<length;i++){
      if(arr[i].checked==true){
        checkflag++;
      }
    }
    console.log(checkflag,'4');
    if(checkflag==length){
      this.setState({ checkedAll: true });
    }else{
      this.setState({ checkedAll: false });
    }
  }

  showCarts=()=>{
    var jsx=[];
    //console.log(this.props);
    console.log(this.props.carts,'---------------')
    this.props.carts.map((item,index)=>{
      jsx.push(<li key={index} className="cartLists">
          {/* <Input type="checkbox" /> */}
          <div className="checkBoxSize">
            <Checkbox
                checked={item.checked}
                onClick={()=>this.props.cartStatus(item)}
                onChange={()=>{this.checkAllOrNot(this.props.carts)}}
              >
            </Checkbox>
          </div>
          
          <span><img src={item.img} /></span>
          <h4>{item.title}</h4>
          <p>{item.price}</p>
          <p>{item.quantity}</p>
          <p>{item.price*item.quantity}</p>
          <Button color="danger" onClick={()=>this.props.delToCart(item)}>删除</Button>
      </li>) ;
    })
    return jsx;
  }
  showCartsView=()=>{
    //console.log(this.props.carts)
    if(this.props.carts.length>0){
      //console.log(1);
      return <div>
        <div className="hasProduct">
            {/* <Input type="checkbox" /> */}
            <Checkbox
                checked={this.state.checkedAll}
                onChange={this.onChange}
              >
            </Checkbox>
           <span className="details">详情</span>
           <span className="danjia">单价</span>
           <span className="quantity">数量</span>
           <span className="total">小计</span>
           <span className="caozuo">操作</span>      
      </div>
      <ul>
        {this.showCarts()}
      </ul>
      <div className="hasProduct">
           {/* <Input type="checkbox" /> */}
           <Checkbox
                checked={this.state.checkedAll}
                onClick={this.onChange}
              >
            </Checkbox>
           <span className="details" ><a href="javascript:void(0);" onClick={()=>this.props.delAllToCart()}>删除</a></span>
           <span className="quantity1">总量：{this.totalNum()}</span>
           <span className="total1">合计：{this.totalPrice()}</span>
           <Button color="danger" className="buy">购买</Button> 
      </div>
      </div>
      
    }else{
      return <p className="noProduct">购物车空空哦！</p>
    }
  }

  //全选
  state = {
    checkedAll: true,
  };

  onChange = () => {
    this.setState({ checkedAll: !this.state.checkedAll });
    if(this.state.checkedAll==true){
      this.props.cartAllStatus(true);
    }else{
      this.props.cartAllStatus(false);
    }
  }

  render(){
    const { delToCart,delAllToCart,cartStatus,cartAllStatus }=this.props;
    return (
      <div className="carts">
        {this.showCartsView()}
      </div>
    )
  }
}

export default connect(mapStateToProps,{delToCart,delAllToCart,cartStatus,cartAllStatus})(Carts);